<template>
  <div>
    <div v-show="!modal.show">

        <a-form layout="inline" class="nmv-search-form" style="padding:20px 20px 0;background-color:white;">
          <a-form-item label="车牌号">
            <a-input class="nmv-w-200" v-model="grid.queryParams.licensePlate" placeholder="请输入车牌号"></a-input>
          </a-form-item>
          <a-form-item label="报警类型">
            <a-select class="nmv-w-200 " allowClear @change="searchQuerys" placeholder="请选择报警类型"
              v-model="grid.queryParams.alarmStatus">
              <a-select-option v-for="(item, index) in enumsLists" :key="index" :value="item.code">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="searchQuerys">查询</a-button>

            <a-button style="margin-left:12px" @click="queryReset">重置</a-button>
          </a-form-item>
        </a-form>
        <!-- <div class="nmv-mt-20 text-total">车辆报警数： {{  grid.total  }} 条</div> -->
      <a-card :bordered="false" :bodyStyle="{ padding: '20px' }">
        <a-tabs type="card" v-model="activeName" @change="onChangeActiveName">
          <a-tab-pane :key="1" :tab="`普通报警`">
            <a-table :locale="locale" :scroll="{ x: 1300 }"   :pagination="false" :loading="grid.load"
              :columns="grid.columns" :data-source="grid.data">
              <span slot="alarmStatusStr" slot-scope="text">{{ text || "-" }}</span>
              <span slot="status" slot-scope="text">
                <div class="flex_start" v-show="text == 2">
                  <div class="yuan red"></div>
                  <div>已处理</div>
                </div>
                <div class="flex_start" v-show="text == 1">
                  <div class="yuan gray"></div>
                  <div>未处理</div>
                </div>
              </span>
              <span slot="name" slot-scope="text">{{ text || "-" }}</span>

              <span slot="action" slot-scope="text, record">
                <permissions type="vehicle/deviceManager/alert/show">
                  <a class="button_right" @click="onSee(record)">查看</a>
                </permissions>
                <a class="button_right redButton" @click="onLock(record)">立即锁车</a>

              </span>
            </a-table>
            <div v-show="grid.total !== 0" style="text-align:right;">
              <a-pagination show-size-changer :current="grid.queryParams.pageNum" :pageSize="grid.queryParams.pageSize"
                @change="onChange" @showSizeChange="onShowSizeChange" style="margin-top:20px;" size="small"
                :total="grid.total" :show-total="total => `共${grid.total}条 `" />
            </div>
          </a-tab-pane>
          <a-tab-pane :key="2" :tab="`防盗报警`">
            <a-table :locale="locale" :scroll="{ x: 1300 }" rowKey="id" :pagination="false" :loading="grid.load"
              :columns="grid.columns" :data-source="grid.data">
              <span slot="alarmStatusStr" slot-scope="text">{{ text || "-" }}</span>
              <span slot="status" slot-scope="text">
                <div class="flex_start" v-show="text == 2">
                  <div class="yuan red"></div>
                  <div>已处理</div>
                </div>
                <div class="flex_start" v-show="text == 1">
                  <div class="yuan gray"></div>
                  <div>未处理</div>
                </div>
              </span>
              <span slot="name" slot-scope="text">{{ text || "-" }}</span>

              <span slot="action" slot-scope="text, record">
                <!-- <permissions type="vehicleManage/alarm/show"> -->
                  <a class="button_right" @click="onSee(record)">查看</a>
                <!-- </permissions> -->
                <a class="button_right redButton" @click="onLock(record)">立即锁车</a>

              </span>
            </a-table>
            <div v-show="grid.total !== 0" style="text-align:right;">
              <a-pagination show-size-changer :current="grid.queryParams.pageNum" :pageSize="grid.queryParams.pageSize"
                @change="onChange" @showSizeChange="onShowSizeChange" style="margin-top:20px;" size="small"
                :total="grid.total" :show-total="total => `共${grid.total}条 `" />
            </div>
          </a-tab-pane>
        </a-tabs>

      </a-card>
      <CallThePoliceDialog ref="CallThePoliceDialogRefs" />
      <PoliceCoverDialog ref="PoliceCoverDialogRefs" @getList="queryReset" />
      <LockCarDialog ref="LockCarDialogRefs" @changes="queryReset" />

    </div>
    <div v-show="modal.show"></div>
  </div>
</template>

<script>
import { vehicleOptions } from '@/utils/options.js'
import { realtimeAlarmDml, enumsList } from '@/services/car'
import { stateTextStyle, cardTitleStyle } from '@/utils/style.js'
import CallThePoliceDialog from './modal/CallThePoliceDialog'
import LockCarDialog from './modal/LockCarDialog'
import PoliceCoverDialog from './modal/PoliceCoverDialog'
import permissions from '@/components/permissions'

import Empty from '@/components/Empty/Empty'

export default {
  name: 'VehicleList',
  components: {
    permissions,
    CallThePoliceDialog,
    PoliceCoverDialog,
    LockCarDialog
  },
  data () {
    return {
      locale: {
        emptyText: <Empty />
      },
      activeName: 1,
      cardTitleStyle,
      selectedRowKeys: [],
      title: '',
      content: '',
      titleData: '',
      modal: {
        show: false,
        data: {}
      },
      preview: {
        show: false,
        list: []
      },
      // 数据列表
      grid: {
        load: false,
        total: 0,
        queryParams: {
          pageSize: 10,
          pageNum: 1
        },
        data: [],
        columns: [
          {
            title: '车牌号',
            dataIndex: 'licensePlate',
            key: 'licensePlate',
            width: 160
          },
          {
            title: '车架号',
            dataIndex: 'vehicleNo',
            key: 'vehicleNo',
            width: 220
          },

          {
            title: '报警类型',
            key: 'alarmStatusStr',
            dataIndex: 'alarmStatusStr',
            scopedSlots: { customRender: 'alarmStatusStr' },
            width: 160
          },
          {
            title: '报警时间',
            key: 'alarmDate',
            dataIndex: 'alarmDate',
            width: 180
          },

          {
            title: '绑定骑手',
            key: 'name',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' },
            width: 160
          },

          {
            title: '操作',
            key: 'action',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            fixed: 'right',
            width: 160
          }
        ]
      },

      stateStyle: Object.freeze(stateTextStyle),
      orgOptions: [],
      vehicleOptions,
      brandOptions: [],
      enumsLists: []
    }
  },
  computed: {

  },
  methods: {
    onLock (row) {
      this.$refs.LockCarDialogRefs.onInitial(row, 1)
    },
    onChangeActiveName () {
      console.log(this.activeName)
      if (this.activeName === 1) {
        delete this.grid.queryParams.alarmStatuses
      } else {
        this.grid.queryParams.alarmStatuses = '1,9'
      }
      this.searchQuerys()
    },
    onChange (page, pageSize) {
      this.grid.queryParams.pageNum = page
      console.log(pageSize)
      this.searchQuery()
    },
    async enumsList () {
      const res = await enumsList()
      const { isSuccess, data, msg } = res
      if (isSuccess) {
        this.enumsLists = data
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    // 搜索
    searchQuerys () {
      this.grid.queryParams.pageNum = 1
      this.grid.queryParams.pageSize = 10
      this.getList()
    },
    onShowSizeChange (current, pageSize) {
      this.grid.queryParams.pageNum = 1
      this.grid.queryParams.pageSize = pageSize
      console.log(current)
      this.searchQuery()
    },
    OnDelete (row) {
      this.title = '注销骑手信息'
      this.content = '确定注销该骑手信息？'
      this.$refs.YesOrNoDialogRefs.onInitial(row)
    },
    // 二次确认
    confirmAgain (value) {
      console.log(value)
    },
    async getList () {
      this.grid.load = true
      const res = await realtimeAlarmDml(this.grid.queryParams)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.grid.data = response.records
        this.grid.total = response.total
        this.grid.load = false
      } else {
        this.$message.newFun(msg, 'error', 2)
        this.grid.data = []
        this.grid.total = 0
        this.grid.load = false
      }
    },
    onImport () {
      this.titleData = '导入车辆信息'

      this.$refs.OnImportRefs.onInitial(2)
    },
    // 搜索
    searchQuery () {
      this.getList()
    },
    // 重置
    queryReset () {
      this.grid.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    // 查看
    onSee (data) {
      this.$refs.CallThePoliceDialogRefs.onInitial(data)
      // this.modal.show = true
    },
    onEdit (id) {
      this.$refs.PoliceCoverDialogRefs.onInitial(id)
    },
    // 返回
    returnBack () {
      this.modal.show = false
      this.getList()
    },
    // 批量分配
    onDistribution () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.newFun('请至少选择一个车辆', 'error', 3)
      } else {
        this.$refs.DistributionModalRefs.onInitial(this.selectedRowKeys)
      }
    }
  },

  created () {
    this.enumsList()
    this.getList()
  }
}
</script>
